<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css定位</title>
</head>
<body>
<!--老大-->
    <div class="parent-box">
        父盒子
        <div class="child-box">
            子盒子
        </div>
    </div>
<!--老二-->
    <div class="other">
        演示脱离文档流盒子
    </div>
</body>
<style type="text/css">
    .parent-box{
        /* 相对定位  绝对定位 固定定位  默认定位*/
        position: relative;
        width: 150px;
        height: 150px;
        background-color: #ca2626;
        left: 10px;
        top: 100px;
        /*margin-top: 100px;*/
    }
    .child-box {
        /*相对于自己原来的位置*/
        position: relative;
        width: 150px;
        height: 150px;
        background-color: lightblue;
        left: 50px; /* 相对于正常位置左移50px */
        top: 20px; /* 相对于正常位置上移20px */
    }
    .other{
        width: 300px;
        height: 300px;
        background-color: darkgreen;
    }
</style>
</html>
